<template>
    <!-- 表单区域 -->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <!-- 供应商选择组件 -->
        <el-form-item>
            <Vendor v-model="formData.vendorId" v-model:vendorName="formData.vendorName"></Vendor>
        </el-form-item>
        <!-- 采购日期选择器 -->
        <el-form-item label="采购日期">
            <el-date-picker v-model="formData.poDate" type="date" placeholder="采购日期"></el-date-picker>
        </el-form-item>
        <!-- 采购员输入框，禁用状态 -->
        <el-form-item>
            <el-input v-model="formData.purchaser" placeholder="采购员" disabled></el-input>
        </el-form-item>
        <!-- 采购总价显示框，禁用状态 -->
        <el-form-item>
            <el-input v-model="totalPrice" placeholder="采购总价" disabled>
                <template #append>
                    <span>元</span>
                </template>
            </el-input>
        </el-form-item>
        <!-- 摘要输入框 -->
        <el-form-item>
            <el-input v-model="formData.brief" placeholder="摘要"></el-input>
        </el-form-item>
    </el-form>

    <!-- 产品选择组件 -->
    <PickProduct v-model="selectProductRows"></PickProduct>
    
    <!-- 产品表格 -->
    <el-table :data="store.tempPO" style="width: 100%">
        <!-- 产品编号列 -->
        <el-table-column fixed prop="productId" label="编号" width="60"></el-table-column>
        <!-- 产品名称列 -->
        <el-table-column fixed prop="productName" label="名称" width="120"></el-table-column>
        <!-- 产品图片列 -->
        <el-table-column label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img[0]" width="50" height="50" />
            </template>
        </el-table-column>
        <!-- 产品数量列 -->
        <el-table-column label="数量" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.qty" size="small" min="1" @change="changePrice(scope.row)"></el-input-number>
            </template>
        </el-table-column>
        <!-- 产品单价列 -->
        <el-table-column label="单价" width="200">
            <template #default="scope">
                <el-input-number v-model="scope.row.price" :precision="2" :step="0.1" size="small" @change="changePrice(scope.row)" style="width: 150px">
                    <template #prefix>
                        <span>￥</span>
                    </template>
                </el-input-number>
            </template>
        </el-table-column>
        <!-- 产品总价列 -->
        <el-table-column label="总价" width="200">
            <template #default="scope">
                <el-input-number v-model="scope.row.sumPrice" disabled :precision="2" size="small" style="width: 150px">
                    <template #prefix>
                        <span>￥</span>
                    </template>
                </el-input-number>
            </template>
        </el-table-column>
        <!-- 备注列 -->
        <el-table-column label="备注" width="300">
            <template #default="scope">
                <el-input v-model="scope.row.brief" placeholder="备注"></el-input>
            </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="scope">
                <el-button type="primary" size="small" @click="del(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 保存按钮 -->
    <el-button type="primary" @click="onSubmit">保存</el-button>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import Vendor from '@/components/vendor.vue';
import PickProduct from '@/components/PickProduct.vue';
import { dayjs, ElMessage } from 'element-plus';
import { wmsStore } from '@/store/pinia';
import { poApi } from '@/api';

const store = wmsStore();
const selectProductRows = ref<any>([]);

// 组件挂载时的初始化操作
onMounted(() => {
    // 可以在这里进行一些初始化操作
})

// 表单数据对象
const formData = reactive({
    vendorId: 0,
    vendorName: '',
    poDate: dayjs().add(1, 'day').format('YYYY-MM-DD'),
    purchaser: store.nickName,
    brief: '',
});

// 监听选中的产品行变化
watch(selectProductRows, (newValue, oldValue) => {
    console.log(newValue);
    newValue.forEach((element: any) => {
        let temp = store.tempPO.filter((it: any) => {
            return it.productId == element.id;
        });
        if (temp.length > 0) {
            return;
        }
        let item = {
            productId: element.id,
            productName: element.name,
            img: element.img,
            qty: 1,
            price: 0,
            sumPrice: 0,
            brief: ''
        };
        store.tempPO.push(item);
    });
});

// 提交表单
const onSubmit = () => {
    if (formData.vendorId == 0) {
        ElMessage.error("请选择供应商");
        return;
    }
    let params = {
        vendorId: formData.vendorId,
        vendorName: formData.vendorName,
        poDate: formData.poDate,
        purchaser: formData.purchaser,
        brief: formData.brief,
        totalPrice: totalPrice.value,
        poDetails: store.tempPO,
        items: store.tempPO
    };
    poApi.add.call(params).then((res) => {
        ElMessage.success("添加成功");
    });
};

// 删除产品行
const del = (scope: any) => {
    store.tempPO.splice(scope.$index, 1);
};

// 计算产品总价
const changePrice = (row: any) => {
    row.sumPrice = row.qty * row.price;
};

// 计算总采购价
const totalPrice = computed(() => {
    let totalPrice = store.tempPO.reduce((pre: any, cur: any) => {
        return pre + cur.sumPrice;
    }, 0);
    return Number(totalPrice.toFixed(2));
});
</script>